<template>
  <div>
    <div style="display: flex;justify-content: center;margin-top: 30px">
      <el-card style="width: 80%;margin: 10px">
        <div style="height: 50px;font-size: 25px;border-bottom: 2px solid #8c8c8c">我的积分</div>
        <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
          <div style="flex: 1;border-right: 1px solid #8c8c8c">
            <div>当前总积分</div>
            <div style="color: #10A200;font-weight: bold;font-size: 24px">{{ points }}</div>
          </div>
          <div style="flex: 1">
            <div style="margin-top: 20px">
              <el-form ref="selectRef" :model="select">
                <div style="display: flex;align-items: center;justify-content: center">
                  <div style="font-weight: bold">优惠券</div>
                  <el-form-item>
                    <div style="display: flex;align-items: center;margin-left: 20px">
                      <div style="margin-left: 10px;margin-top: 20px">
                        <el-select v-model="select.id" placeholder="请选择" style="width: 100%">
                          <el-option
                              v-for="item in coupon"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-form-item>
                  <el-button type="warning" size="medium" style="height: 40px;margin-left: 20px"
                             @click="dialogIntegral = true">兑换
                  </el-button>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div style="display: flex;justify-content: center">
      <el-card style="width: 80%;margin: 10px">
        <div style="height: 50px;font-size: 25px">积分明细</div>
        <div style="margin-bottom: 10px">
        </div>
        <el-table ref="shopsTable" :data="tableData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="time" label="时间" align="center"></el-table-column>
          <el-table-column prop="type" label="增加/消耗"></el-table-column>
          <el-table-column prop="amount" label="积分数"></el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total,  prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>

    <el-dialog title="提示" :visible.sync="dialogIntegral" width="30%">
      <el-form ref="formRef" :model="integral" label-width="80px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">您是否确认兑换{{ select.name }}优惠券</div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="trade()">确认</el-button>
          <el-button type="info" @click="dialogIntegral = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "points",
  data() {
    return {
      dialogIntegral: false,
      coupon: [],
      integral: '',
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      tableData: [], //表中数据
      originalData: [],
      select: {
        id: "",
        name: "",
        point: "",
        discount: "",
        status: ""
      },
      rules: {
        id: [
          {required: true, message: '请选择优惠券', trigger: 'change'}
        ],
      },
      points: 0,
      pageNum: 1,
      pageSize: 5,
      total: 0,
    }
  },
  created() {
    this.load();
  },
  methods: {
    load(pageNum) {  //分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.post('/user_points_list/', {
        "username": this.user.username,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.points_detail
          this.points = res.data.points
          this.total = res.data.item_amount
          this.loadCoupon();
        } else {
          this.$message.error(res.msg)
          this.loadCoupon();
        }
      })
    },
    loadCoupon() {
      this.$request.get('/coupon_template_list/').then(res => {
        console.log(res.code)
        if (res && res.data) {
          this.originalData = res.data.coupon_list
          this.coupon = this.originalData.filter(row => row.status !== '已废弃');
          console.log("优惠券", this.coupon)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    trade() {
      if (!this.select.id) {
        this.$message.error("请选择优惠券")
        this.dialogIntegral = false
        return
      }
      console.log("select", this.select)
      this.$request.post('/coupon_exchange/', {
        "user_id": this.user.id,
        "coupon_template_id": this.select.id,
      }).then(res => {
        if (res.code === '200') {
          this.load();
          this.$message.success('兑换成功')
          this.dialogIntegral = false;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    }
    ,
  }
}
</script>
<style scoped>

</style>